// 控制权限
checkLogin()

//渲染用户名
renderName()

//退出登录
backLogin()

// 渲染薪资面板
function renderOverview(overview) {
    //方法1:
    // document.querySelector('.salary').innerHTML = overview.salary
    // document.querySelector('.student_count').innerHTML = overview.student_count
    // document.querySelector('.age').innerHTML = overview.age
    // document.querySelector('.group_count').innerHTML = overview.group_count

    // 方法2:
    //获取对象中所有的属性
    Object.keys(overview).forEach((ele) => {
        // ele是变量,得用中括号语法
        document.querySelector(`.${ele}`).innerHTML = overview[ele]
    })
}

//获取就业统计数据
async function getData() {
    const res = await axios.get('/dashboard')
    console.log(res)
    //第一个图表渲染
    const { year, overview, groupData, salaryData } = res.data
    renderOverview(overview)
    renderGroupData(groupData)
    renderGender(salaryData)
    renderSalaryData(salaryData)
    renderone(year)
}
getData()
//111
function renderone(year) {
    const myChart = echarts.init(document.querySelector('#line'))
    const option = {
        tooltip: {
            show: true,
            trigger:'axis',
        },
        title: {
            text: '2022全学科薪资走势',
            top: '3%',
            left: '5%',
        },
        grid: {
            top: '20%'
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                }
            },
        },
        series: [{
            data: year.map(ele => ele.salary),
            type: 'line',
            smooth: true,
            symbolSize: 8,
            lineStyle: {
                width: 6,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: '#4e94ee' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#587fef' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },

            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#badaf9' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#f6faff' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }

            },
        }],

        xAxis: {
            axisLine: {
                type: 'category',
                lineStyle: {
                    color: '#ccc',
                    type: 'dashed',
                }
            },
            data: year.map(ele => ele.month)
        },

    };
    myChart.setOption(option)
}


//222
function renderGroupData(groupData) {
    // console.log(groupData[1])
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('#lines'))
    // 指定图表的配置项和数据
    const option = {
        tooltip: {},
        grid: {
            left: 70,
            top: 30,
            right: 30,
            bottom: 50
        },
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#ccc'
                }
            },
            axisLabel: {
                color: '#999'
            },
            data: groupData[1].map(ele => ele.name)
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                }
            }
        },
        series: [
            {
                name: '期望薪资',
                data: groupData[1].map(ele => ele.hope_salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#34D39A'
                        }, {
                            offset: 1, color: 'rgba(52,211,154,0.2)'
                        }],
                        global: false
                    }
                }
            },
            {
                name: '实际薪资',
                data: groupData[1].map(ele => ele.salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#499FEE'
                        }, {
                            offset: 1, color: ' rgba(73,159,238,0.2)'
                        }],
                        global: false
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)


    // 切换页面效果
    const btns = document.querySelector('#btns')
    btns.addEventListener('click', function (e) {
        // console.log(e.target.tagName)
        if (e.target.tagName === 'BUTTON') {

            // 按钮高亮效果
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')

            // 点击切换页面效果
            // console.log(e.target.innerHTML)
            const index = e.target.innerHTML
            option.xAxis.data = groupData[index].map(ele => ele.name)
            option.series[0].data = groupData[index].map(ele => ele.hope_salary)
            option.series[1].data = groupData[index].map(ele => ele.salary)
            myChart.setOption(option)
        }
    })
}

//渲染班级薪资分布
function renderSalaryData(salaryData) {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('#salary'));
    // 指定图表的配置项和数据
    option = {
        title: {
            text: '班级薪资分布',
            top: '3%',
            left: '3%'
        },

        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['50%', '60%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,

                },

                labelLine: {
                    show: false
                },
                data: salaryData.map((ele, index) => {
                    return {
                        value: ele.b_count + ele.g_count,
                        name: ele.label
                    }
                })
            }
        ],
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a']

    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}


function renderGender(salaryData) {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('#gender'))

    // 指定图表的配置项和数据
    const option = {
        title: [
            {
                text: '男女薪资分布',
                left: 10,
                top: 10,
                textStyle: {
                    fontSize: 16
                }
            },
            {
                text: '男生',
                left: '45%',
                top: '45%',
                textStyle: {
                    fontSize: 12
                }
            },
            {
                text: '女生',
                left: '45%',
                top: '85%',
                textStyle: {
                    fontSize: 12
                }
            }
        ],
        series: [
            {
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['50%', '30%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                },
                labelLine: {
                    show: true
                },
                data:
                    //     [
                    //     { value: 1048, name: 'Search Engine' },
                    //     { value: 735, name: 'Direct' },
                    //     { value: 580, name: 'Email' },
                    //     { value: 484, name: 'Union Ads' },
                    //     { value: 300, name: 'Video Ads' }
                    // ]
                    salaryData.map(ele => {
                        return {
                            value: ele.b_count,
                            name: ele.label
                        }
                    })
            },
            {
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                },
                labelLine: {
                    show: true
                },
                data:
                    //     [
                    //     { value: 1048, name: 'Search Engine' },
                    //     { value: 735, name: 'Direct' },
                    //     { value: 580, name: 'Email' },
                    //     { value: 484, name: 'Union Ads' },
                    //     { value: 300, name: 'Video Ads' }
                    // ]
                    salaryData.map(ele => {
                        return {
                            value: ele.g_count,
                            name: ele.label
                        }
                    })
            }
        ],
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a']
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
}

